import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import { Button } from 'ant-design-vue'
import type { VxeColumnSlotTypes, VxeGridProps } from 'vxe-table'
import ExportWorkTypesPop from './components/ExportWorkTypesPop'
import AddWorkTypesPop from './components/AddWorkTypesPop'
import ImportWorkTypesPop from './components/ImportWorkTypesPop'
import EditInsuranceCompanyPop from './components/EditInsuranceCompany'
import AddIndustryPop from './components/AddIndustryPop'
import UploadFilePop from './components/uploadFile'
import { getInsureIndustryList } from '@/api/insureIndustry'
import type { AnyObject } from 'ant-design-vue/es/_util/type'
import type { InsureIndustryListDto, InsureOccupationDto } from '@/api/insureIndustry/types'
import type { AddType } from '@/api/types'

type ShowPropType = 'showAddInsureIndustry' | 'showAddWorkType'

@Component
export class IndustryView extends TableRender {
    pageTitle = '行业管理'
    // noTablePadding = true
    noFilterPadding = true

    addType = 'add' as AddType
    showAddInsureIndustry = false

    isExportWorkTypesPop = false
    showAddWorkType = false
    isImportWorkTypesPop = false
    isEditInsuranceCompany = false
    isAddIndustryPop = false
    isUploadFilePop = false

    curItem = {} as InsureIndustryListDto | InsureOccupationDto

    onOpenEditInsuranceCompany() {
        this.isEditInsuranceCompany = true
    }

    tableConfig() {
        const obj = {
            treeConfig: {
                rowField: 'id',
                childrenField: 'occupationList'
            },
            ...super.tableConfig()
        }
        return obj
    }

    filterConfig() {
        return {
            occupationName: {
                name: '工种名称',
                element: 'input',
                placeholder: '请输入工种名称'
            }
        }
    }

    tableColumnConfigOld = () =>
        [
            {
                field: 'name',
                title: '名称',
                treeNode: true
            },
            {
                field: 'level',
                title: '系统等级'
                // formatter: ({ row }) => {
                //     return row?.level ? row.level + '类' : '--'
                // }
            },
            {
                field: 'code',
                title: '工种编码'
            },
            {
                field: 'grade',
                title: '类型',
                formatter: ({ row }) => {
                    return row.code.includes('GZ') ? '工种' : '行业'
                }
            },
            {
                field: 'operate',
                title: '操作',
                width: 200,
                params: {
                    buttons: [
                        {
                            hidden: (row) => {
                                return row.code.includes('GZ')
                            },
                            text: '添加',
                            event: (row) => this.onShowWorkType('add', row)
                        },
                        {
                            hidden: (row) => {
                                return !row.code.includes('GZ')
                            },
                            text: '配置',
                            event: (row: InsureOccupationDto) => this.onShowCompany(row)
                        },
                        {
                            text: '编辑',
                            event: (row) => this.onEdit(row, row.code.includes('GZ') ? 'showAddWorkType' : 'showAddInsureIndustry' )
                        }
                    ]
                },
                slots: {
                    default: 'buttons'
                }
            }
        ] as TableRenderColumnTypes<InsureIndustryListDto>

    onShowAddIndustry(type: AddType, row?: InsureIndustryListDto) {
        this.addType = type
        row && (this.curItem = row)
        this.showAddInsureIndustry = true
    }
    onShowWorkType(type: AddType, row: InsureIndustryListDto) {
        this.addType = type
        this.curItem = row
        this.showAddWorkType = true
    }
    onEdit(row: InsureIndustryListDto | InsureOccupationDto, type: ShowPropType ) {
        this.curItem = row
        this.addType = 'edit'
        this[type] = true
    }
    onShowCompany(row: InsureOccupationDto) {
        this.curItem = row
        this.isEditInsuranceCompany = true
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        return getInsureIndustryList({
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    render() {
        return (
            <div class="flex flex-col h-full ">
                {this.renderTitle()}
                <div class="flex items-center justify-between px-24 pt-12">
                    <div class="flex-1">{this.renderFilter()}</div>
                    <div class="flex-none flex items-center">
                        {/* <Button class="mr-8">折叠面板</Button> */}
                        <Button class="mr-8" type="primary" onClick={() => this.isExportWorkTypesPop = true}>
                            导出工种
                        </Button>
                        <Button class="mr-8" type="primary" onClick={() => this.isImportWorkTypesPop = true}>
                            导入工种
                        </Button>
                        <Button onClick={() => this.onShowAddIndustry('add')}>新增</Button>
                    </div>
                </div>
                {this.renderTable()}
                {this.renderPager()}
                <ExportWorkTypesPop v-model:show={this.isExportWorkTypesPop} />
                <ImportWorkTypesPop v-model:show={this.isImportWorkTypesPop} />
                {/* 新增行业弹窗 */}
                <AddIndustryPop
                    v-model:show={this.showAddInsureIndustry}
                    addType={this.addType}
                    curData={this.curItem as InsureIndustryListDto}
                    onRefresh={() => this.reloadPage(1)}
                />
                {/* 新增工种弹窗 */}
                <AddWorkTypesPop
                    v-model:show={this.showAddWorkType}
                    addType={this.addType}
                    curData={this.curItem}
                    onRefresh={() => this.reloadPage(1)}
                />
                {/* 配置关联关系 */}
                <EditInsuranceCompanyPop v-model:show={this.isEditInsuranceCompany} curData={this.curItem as InsureOccupationDto}/>

                <UploadFilePop v-model:show={this.isUploadFilePop} />
            </div>
        )
    }
}

export default toNative<{}, {}>(IndustryView)
